<template>
  <div id="app">
    <div class="head"></div>
    <div class="body"></div>
    <div class="userlist">
      <ul class="title">
        <li
          v-for="(item, index) in title"
          :key="index"
          class="title_list"
          @click="tap(index)"
        >
          <b>{{ item }}</b>
        </li>
      </ul>
      <ul class="comodity">
        <li v-for="item in user_list_arr" :key="item.id">
          <img :src="item.url" />
          <p class="comodity_name">{{ item.name }}</p>
          <p class="function">
            <span>￥{{ item.price }}</span
            ><button @click="add(item)">+</button>
          </p>
        </li>
      </ul>
    </div>
    <div class="foot" v-show="foot_show" @click="gwc()">
      <span>购物车</span>
    </div>
    <table border="1px" v-show="gwc_show">
      <thead>
        <tr>
          <th><input type="checkbox" name="" id=""></th>
          <th>图片</th>
          <th>名字</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody >
        <tr v-for="item in gwc_list" :key="item.id">
          <td><input type="checkbox" :checked="item.is"></td>
          <td><img :src="item.url"></td>
          <td>{{ item.name}}</td>
          <td>{{price}}</td>
          <td><button>-</button><span>{{item.num}}</span><button>+</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      title: ["热门推荐", "新品推荐", "清凉一下", "呵护肠胃"],
      user_list: [
        {
          pid: 0,
          id: 0,
          name: "京都念慈庵 京都念慈庵蜜炼川贝枇杷膏150ml",
          price: 28.3,
          url: require("../assets/0.1.png"),
        },
        {
          pid: 0,
          id: 1,
          name: "华润三九 感冒灵颗粒10g*9袋",
          price: 13.7,
          url: require("../assets/0.2.png"),
        },
        {
          pid: 0,
          id: 2,
          name: "盏如初燕窝粥168g*8碗",
          price: 59,
          url: require("../assets/0.3.png"),
        },
        {
          pid: 0,
          id: 3,
          name: "石家庄以岭 莲花清瘟胶囊0.35g*12粒*3板",
          price: 26.3,
          url: require("../assets/0.4.png"),
        },
        {
          pid: 1,
          id: 0,
          name: "蛋白粉礼盒装330g*2",
          price: 249,
          url: require("../assets/1.1.png"),
        },
        {
          pid: 1,
          id: 1,
          name: "维诺健蛋白粉",
          price: 199,
          url: require("../assets/1.2.png"),
        },
        {
          pid: 1,
          id: 2,
          name: "维生素片",
          price: 99,
          url: require("../assets/1.3.png"),
        },
        {
          pid: 1,
          id: 3,
          name: "钙片",
          price: 194,
          url: require("../assets/1.4.png"),
        },
        {
          pid: 2,
          id: 0,
          name: "藿香正气口服液",
          price: 29.5,
          url: require("../assets/2.1.png"),
        },
        {
          pid: 2,
          id: 1,
          name: "藿香正气水",
          price: 15.3,
          url: require("../assets/2.2.png"),
        },
        {
          pid: 2,
          id: 2,
          name: "风油精",
          price: 8,
          url: require("../assets/2.3.png"),
        },
        {
          pid: 2,
          id: 3,
          name: "夏桑菊颗粒",
          price: 15,
          url: require("../assets/2.4.png"),
        },
        {
          pid: 3,
          id: 0,
          name: "汤臣倍健益生菌粉",
          price: 80,
          url: require("../assets/3.1.png"),
        },
        {
          pid: 3,
          id: 1,
          name: "健胃消食片",
          price: 13,
          url: require("../assets/3.2.png"),
        },
        {
          pid: 3,
          id: 2,
          name: "维诺健(ZY)益生菌粉",
          price: 89,
          url: require("../assets/3.3.png"),
        },
        {
          pid: 3,
          id: 3,
          name: "扬子江 胃痛颗粒",
          price: 31,
          url: require("../assets/3.4.png"),
        },
      ],
      user_list_arr: [
        {
          pid: 0,
          id: 0,
          name: "京都念慈庵 京都念慈庵蜜炼川贝枇杷膏150ml",
          price: 28.3,
          url: require("../assets/0.1.png"),
        },
        {
          pid: 0,
          id: 1,
          name: "华润三九 感冒灵颗粒10g*9袋",
          price: 13.7,
          url: require("../assets/0.2.png"),
        },
        {
          pid: 0,
          id: 2,
          name: "盏如初燕窝粥168g*8碗",
          price: 59,
          url: require("../assets/0.3.png"),
        },
        {
          pid: 0,
          id: 3,
          name: "石家庄以岭 莲花清瘟胶囊0.35g*12粒*3板",
          price: 26.3,
          url: require("../assets/0.4.png"),
        },
      ],
      gwc_list: [],
      foot_show: false,
      guc_show: false,
    };
  },
  mounted() {},
  methods: {
    tap(i) {
      var a = this.user_list.filter((item) => item.pid == i);
      this.user_list_arr = a;
    },
    add(i) {
      var obj = {
        id: this.gwc_list.length,
        name: i.name,
        price: i.price,
        url: i.url,
        is: false,
        num: 1,
      };
      this.gwc_list.push(obj);
      this.foot_show = true;
    },
    gwc() {},
  },
  comments: {},
};
</script>
<style scoped>
* {
  list-style: none;
}

#app {
  background: #f8f8f8;
}

ul {
  padding: 0px;
}

.title {
  width: 700px;
  height: 30px;
}

.title_list {
  display: inline-block;
  padding: 10px 50px;
  text-align: center;
  color: black;
}

.title_list :hover {
  color: #009eff;
}

.comodity {
  width: 700px;
}

.comodity li {
  width: 300px;
  height: 425px;
  background: #ffffff;
  border-radius: 15px;
  display: inline-block;
  margin-left: 35px;
  margin-bottom: 20px;
  margin-top: 0px;
}
.comodity li img {
  width: 300px;
  height: 300px;
  border-radius: 15px;
}

.comodity_name {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  margin: 0px;
}

.function {
  padding: 5px 10px;
  position: relative;
}

.function span {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 16px;
  color: red;
  font-weight: bold;
}

.function button {
  position: absolute;
  right: 30px;
  top: -10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  font-size: 25px;
  font-weight: bold;
  color: white;
  background: #009eff;
}

.foot {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  padding: 20px;
  font-size: 35px;
}
</style>